<template>
  <div class="photo-list">
    <van-tabs>
      <van-tab
        v-for="category in category"
        :key="category.id"
        temp
      >
        <template #title>
          <span @click="getphotoimages(category.id)">
            {{category.title}}
          </span>
        </template>
      </van-tab>
    </van-tabs>
    <ul
      class="img-box"
      v-if="imgs.length!==0"
    >
      <li
        v-for="imgs in imgs"
        :key="imgs.id"
        @click="godetile(imgs.id)"
      >
        <img
          v-lazy="imgs.img_url"
          alt=""
        >
      </li>
    </ul>
    <div if-else>
      暂无数据
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    category: {},
    imgs: {}
  }),
  methods: {
    async getcategory() {
      const res = await this.$http.getcategory()
      this.category = res.message
      this.category.unshift({
        id: 0,
        title: '全部'
      })
    },
    async getphotoimages(id) {
      const res = await this.$http.getphotoimages(id)
      this.imgs = res.message
    },
    godetile(id) {
      this.$router.push('/home/photoinfo/' + id)
    }
  },
  created() {
    this.getcategory()
    this.getphotoimages(0)
  }
}
</script>
<style lang="scss" scoped>
.img-box {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
